import React, { useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import API from '../../api/client';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons'

const AddDataSourceModal = ({ 
  visible, 
  onClose, 
  refreshDataSources,
  dataSourceTypes 
}) => {
  const [formData, setFormData] = useState({
    type_id: '',
    name: '',
    host: '',
    port: 3306,
    username: '',
    password: '',
    database: ''
  });
  const [isSaving, setIsSaving] = useState(false);
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async () => {
    setIsSaving(true);
    try {
      // 使用API客户端发起请求
      const result = await API.createDataSource(formData);
      console.log('数据源创建成功:', result);
      refreshDataSources();
      onClose();
    } catch (error) {
      console.error('创建数据源失败:', error);
      alert(`创建数据源失败: ${error}`);
    } finally {
      setIsSaving(false);
    }
  };


  if (!visible) return null;

  return (
    <div className="modal-backdrop">
      <div className="modal-content" style={{ maxWidth: '600px' }}>
        <div className="modal-header">
          <h3>添加新数据源</h3>
          <button className="close-btn" onClick={onClose}>×</button>
        </div>
        
        <div className="modal-body">
          <div className="form-group">
            <label>数据源类型</label>
            <div className="custom-select">
              <select 
                name="type_id" 
                value={formData.type_id} 
                onChange={handleChange}
                className="form-control"
                required
              >
                <option value="">请选择</option>
                {dataSourceTypes.map(type => (
                  <option key={type.id} value={type.id}>
                    {type.name}
                  </option>
                ))}
              </select>
              <DownOutlined className="select-arrow" />
            </div>
          </div>
          
          <div className="form-group">
            <label>数据源名称</label>
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleChange}
              className="form-control"
              placeholder="输入数据源名称"
              required
            />
          </div>
          
          <div className="form-group">
            <label>用户名</label>
            <input
              type="text"
              name="username"
              value={formData.username}
              onChange={handleChange}
              className="form-control"
              placeholder="输入数据库用户名"
              required
            />
          </div>
          
          <div className="form-group">
            <label>密码</label>
            <input
              type="password"
              name="password"
              value={formData.password}
              onChange={handleChange}
              className="form-control"
              placeholder="输入数据库密码"
              required
            />
          </div>
          
          <div className="form-row">
            <div className="form-group" style={{ flex: 3 }}>
              <label>Host</label>
              <input
                type="text"
                name="host"
                value={formData.host}
                onChange={handleChange}
                className="form-control"
                placeholder="输入主机地址"
                required
              />
            </div>
            
            <div className="form-group" style={{ flex: 1, marginLeft: '12px' }}>
              <label>Port</label>
              <input
                type="number"
                name="port"
                value={formData.port}
                onChange={handleChange}
                className="form-control"
                placeholder="端口号"
                required
              />
            </div>
          </div>
          
          <div className="form-group">
            <label>数据库名称</label>
            <input
              type="text"
              name="database"
              value={formData.database}
              onChange={handleChange}
              className="form-control"
              placeholder="输入数据库名称"
              required
            />
          </div>
        </div>
        
        <div className="modal-footer">
            <button className="btn-outline" onClick={onClose} disabled={isSaving}>
            取消
            </button>
            <button 
            className="btn-primary" 
            onClick={handleSubmit} 
            disabled={isSaving}
            >
            {isSaving ? (
                <>
                <LoadingOutlined style={{ marginRight: 8 }} /> 
                保存中...
                </>
            ) : '保存'}
            </button>
        </div>
      </div>
    </div>
  );
};

export default AddDataSourceModal;